In this blog, I’m explaining about Angularjs.
What is AngularJS?
Angularjs use for create dynamic web apps. it’s use html as your template language and it all happens in JavaScript within the browser.this is designed for angular Html. Html is a great language for static documents.
Why AngularJS?
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Feature of the AngularJs:
· Controllers
· Filters
· Templates
· Introduction
· Conceptual Overview
· Understanding Angular Services
· Managing Service Dependencies
· Creating Services
· Injecting Services into Controllers
· Testing Angular Services
· Using $Location
· Angular Services
· Data Binding
· Working with CSS in Angular
· Dependency injection
· Providers
· Modules
· Scopes
· Expressions
· Bootstrap
· Directives
· HTML Compiler
· Forms
· Animations
· E2E Testing
· Unit Testing
· Internet Explorer Compatibility
Controller:
In AngularJs, a Controller is a JavaScript constructor function that is used to parameter of the angular scope.when a controller is attached to the dom via ng-controller directive.angularjs will be create a new controller object.using the speciefied controller function.
Use of the controllers to:
· Set up the initial state of the $scope object.
The following example shows a very simple constructor function for a Controller, GreetingCtrl, which attaches agreeting property containing the string 'Hola!' to the $scope:
<scripttype="text/javascript">
function GreetingCtrl($scope) {
$scope.greeting = 'Hello!';
}
</script>
Once the Controller has been attached to the DOM, the greeting property can be data-bound to the template:
<div ng-controller="GreetingCtrl">
{{ greeting }}
</div>
Angular allows you to create controller function in the global scope.in a real aaplication you should use the .controller method of your angular module for your application.
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hello!';
}]);Filters:
Filter is use for display to the user they can be used in view templates,
controllers or services and it is easy to define your filter. Use API
filterProvider
HTML Compiler
Angular HTML Compiler is allows to developer to teach the browser new HTML syntax and attach behavior to any html element are attribute and create new html element or attribute with AngularJs calls these behavior directive.
Compiler is traverse the dom and collect all of the directives.
Example 1:
I created a Hello World example using Angular.print “Hello World!” message on browser.
Index.html
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"ng-app="myApp">
<head>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<scriptsrc="Script.js"></script>
</head>
<body>
<div>
{{ 'World' | greet }}
</div>
</body>
</html>
Script.js
var myAppModule = angular.module('myApp', []);
myAppModule.filter('greet', function () {
returnfunction (name) {
return'Hello, ' + name + '!';
};
});
Output
Example 2:
In this example I have Add contact email using angularjs.
<!DOCTYPEhtml>
<html xmlns="http://www.w3.org/1999/xhtml"ng-app>
<head>
<title></title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<divng-controller="ContactController">
Email:<inputtype="text"ng-model="newcontact"placeholder="EmailID"/>
<buttonng-click="add()">Add</button>
<h2>Contacts</h2>
<ul>
<ling-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</div>
<scripttype="text/javascript">
function ContactController($scope) {
$scope.contacts = ["abc@email.com”];
$scope.add = function () {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</body>
</html>
Output
in my next post i'll explain about Dropdownlist using BootStrap in ASP.Net
Leave Comment